<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程信息</title>
    <style type="text/css">
        #addPage {
            position: absolute;
            left: 5px;
            top: 40px;
            border: 2px solid red;
            width: 500px;
            height: 400px;
            background-color: gray;
        }
    </style>
    <script src="js/jquery-3.4.1.min.js"></script>
    <script>
        $(function () {
            var pageNo = 1;
            var subjectname = "";

            function load() {
                let t = $("#tableSubject");
                t.find("tr:gt(0)").remove();
                $.getJSON("subject-search.do", {pageNo: pageNo, subjectname: subjectname}, function (p) {
                    //console.log(p);

                    //给a连接的 data-page赋值
                    $("#pager .prev").attr("data-page", p.pageNo <= 1 ? 1 : p.pageNo - 1);
                    $("#pager .next").attr("data-page", p.pageNo >= p.totalPages ? p.totalPages : p.pageNo + 1);
                    $("#pager .last").attr("data-page", p.totalPages);
                    $("#pager #pageGo").val(p.pageNo);
                    $("#pager #all").text("/" + p.totalPages);
                    //$("#pager .prev").attr("disabled",p.pageNo<=1);
                    //$("#pager .next").attr("disabled",p.pageNo>=p.totalPages);
                    //$("#pager .prev").attr("disabled",true);
                    //$("#pager .next").attr("disabled",true);
                    $.each(p.data, function (i, o) {
                        let tr = $("<tr></tr>");
                        tr.append("<td>" + o.id + "</td>");
                        tr.append("<td>" + o.subjectname + "</td>");
                        tr.append("<td>" + o.classhour + "</td>");
                        tr.append("<td>" + o.gradeId + "</td>");
                        tr.append("<td><a href='#' data-id='" + o.id + "' id='update'>修改</a><a href='#'>删除</a></td>");
                        t.append(tr);
                    });
                });
            }

            //启动加载
            load();
            //按钮点击问题
            $("#pager a").click(function () {
                pageNo = $(this).attr("data-page");
                load();
            });
            $("#pager #go").click(function () {
                pageNo = $(this).prev().prev().val();
                load();
            });
            $("form#searchForm").submit(function () {
                pageNo = 1;
                subjectname = $("#subjectname").val();
                load();
                return false;
            });
            ////#绑定修改连接
            $("#tableSubject").on("click", "#update", function () {
                let id = $(this).attr("data-id");

                $.getJSON("subject-get.do", {id: id}, function (res) {
                    $("#addPage").show();
                    //alert(JSON.stringify(res));
                    $("#addForm [name=id]").val(res.id);
                    $("#addForm [name=subjectname]").val(res.subjectname);
                    $("#addForm [name=gradeid]").val(res.gradeId);
                    //$("#gradeid").val(5);
                    //alert($("#gradeid").html());
                    //$("
                    $("#addForm [name=classhour]").val(res.classhour);
                    $("#addForm").attr("action", "subject-update.do");

                });
            });
            ///////
            $.getJSON("grade-findALL.do", function (data) {
                let g = $("#gradeid");
                $.each(data, function (i, d) {
                    g.append("<option value='" + d.id + "'>" + d.gname + "</option>");
                });
            });
            $("#btnAdd").click(function () {
                $("#addPage").show(1000);
                $("#addForm").attr("action", "subject-add.do");
            });
            $("#saveSubject").click(function () {
                let sub = $("form#addForm").serialize();
                $.post($("#addForm").attr("action"), sub, function (res) {
                    if (parseInt(res) >= 1) {
                        alert("保存成功");
                        $("#addPage").hide();
                        $("form#addForm").reset();
                        load();//window.location.reload();
                    } else {
                        alert("保存失败");
                    }
                }).fail(function (e) {
                    alert("保存失败:" + e.responseText);
                });
                return false;
            });

            ///////
        });
    </script>
</head>
<body>

<h2>课程信息</h2>
<p>
<form id="searchForm">
    <input type="search" id="subjectname" placeholder="课程名"/>
    <input type="submit"/>
    <button type="button" id="btnAdd">新增课程</button>
</form>
</p>
<table border="1" cellspacing="0" cellpadding="0" id="tableSubject">
    <tr>
        <th>编号</th>
        <th>课程名</th>
        <th>学时</th>
        <th>年级号</th>
        <th>操作</th>
    </tr>
</table>
<p id="pager">
    <a href="#" class="first" data-page="1">第一页</a>

    <a href="#" class="prev" data-page="1">上一页</a>

    <input type="number" id="pageGo" min="1" value="1" style="width: 40px"/><span id="all"></span>
    <input type="button" value="电梯直达" id="go"/>

    <a href="#" class="next" data-page="1">下一页</a>
    <a href="#" class="last" data-page="1">最后一页</a>
</p>
<div id="addPage" style="display: none;">
    <form action="subject-add.do" method="post" id="addForm">
        <input type="hidden" name="id"/>
        <p>
            <label>课程名</label><input type="text" required name="subjectname"/>
        </p>
        <p>
            <label>课程名</label><input type="number" min="1" required name="classhour"/>
        </p>
        <p>
            <label>课程名</label>
            <select name="gradeid" id="gradeid">

            </select>
        </p>
        <p>
            <input type="submit" value="保存" id="saveSubject"/>
            <input type="button" value="取消" id="cancel"/>
        </p>
    </form>
</div>
</body>
</html>